<template>
  <div class="page-bg page-login">
    <!-- <img class="login-logo" src="../../assets/images/logo-ai.png" alt /> -->
    <!-- <img class="login-logo" src="../../assets/images/logo-xy.png" alt /> -->

    <div class="login-card-wrapper">
      <div class="login-card">
        <p class="title">用户登录</p>
        <Form ref="loginForm" :model="modelLogin" class="login-form">
          <FormItem prop="account">
            <Input
              name="loginkey"
              type="text"
              v-model="modelLogin.account"
              placeholder="请输入用户名"
              @keyup.enter.native="login"
              ref="loginkey"
            />
            <i class="iconfont icon-user"></i>
          </FormItem>
          <FormItem prop="password">
            <Input
              type="password"
              v-model="modelLogin.password"
              placeholder="请输入密码"
              @keyup.enter.native="login"
              ref="loginPassword"
            />
            <i class="iconfont icon-password"></i>
          </FormItem>

          <FormItem>
            <Button class="btn-login" type="primary" disabled v-if="logining">登录中...</Button>
            <Button class="btn-login" type="primary" @click="login" v-else>登录</Button>
          </FormItem>
          <router-link to="/register" class="login-register">立即注册</router-link>
        </Form>
      </div>
      <template>
        <div v-show="wrongShow" class="login-wrong"></div>
        <div v-show="wrongShow" class="wrong-text" @click="wrongShow=false">
          <i class="iconfont icon-cha"></i>
          <span>{{wrongText}}</span>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { login, getAccount } from 'http/api/user';
import { routePathData } from 'assets/scripts/common';

export default {
  data () {
    return {
      logining: false, // 正在登陆中
      modelLogin: {
        account: '',
        password: ''
      },
      wrongShow: false,
      wrongText: ''
    };
  },

  methods: {
    // 3s关闭错误
    closeWrong () {
      // eslint-disable-next-line
      setTimeout(() => {
        this.wrongShow = false;
        this.wrongText = '';
      }, 3000);
    },

    // 登陆
    login () {
      let that = this;
      let { account, password } = that.modelLogin;
      if (!account) {
        this.wrongShow = true;
        this.wrongText = '用户名不能为空';
        this.closeWrong();
        this.$refs.loginkey.focus();
        return;
      }

      if (!/^[A-Za-z0-9-]{1,50}$/.test(account)) {
        this.wrongShow = true;
        this.wrongText = '用户名格式不正确';
        this.closeWrong();
        this.$refs.loginkey.focus();
        return;
      }

      if (!password) {
        this.wrongShow = true;
        this.wrongText = '密码不能为空';
        this.closeWrong();
        this.$refs.loginPassword.focus();
        return;
      }

      localStorage.clear();
      this.logining = true;

      login(this.modelLogin)
        .then(res => {
          if (!res) {
            return;
          }
          const { accessToken, authorities } = res;
          if (accessToken) {
            let userInfo = {};
            localStorage.userToken = accessToken;
            userInfo.role = authorities[0];
            that.$cookies.set('access_token', accessToken);

            // 登录成功之后，获取用户的信息 存到 store 里
            getAccount()
              .then(res => {
                if (!res) {
                  return;
                }

                userInfo = Object.assign({}, res, userInfo);
                localStorage.userInfo = JSON.stringify(userInfo);
                this.$router.push({ path: routePathData.home });
                // eslint-disable-next-line
                setTimeout(() => {
                  this.logining = false;
                }, 500);
              })
              .catch(() => {
                this.logining = false;
              });
          }
        })
        .catch(() => {
          this.logining = false;
        });
    }
  },

  mounted () {
    this.$nextTick(() => {
      this.$refs.loginkey.focus();
    });
    // eslint-disable-next-line
    setTimeout(() => {
      if (localStorage.userInfo && localStorage.userToken) {
        this.$router.push({ path: routePathData.home });
      }
    }, 100);
  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
@import "../../assets/theme/themeBlue.less";
.page-login {
  .login-logo {
    position: absolute;
    left: 60px;
    top: 40px;
    width: 120px;
  }
  .login-card-wrapper {
    width: 484px;
    height: 322px;
    position: absolute;
    top: 50%;
    right: 12%;
    transform: translateX(0) translateY(-50%);
    background-image: url("~assets/images/input-box.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    p.title {
      text-align: center;
      font-size: 20px;
      height: 96px;
      line-height: 110px;
      color: #ffffff;
      font-weight: 600;
    }
  }

  .btn-login {
    font-size: 14px;
    width: 100%;
    background-color: transparent;
    height: 42px;
    border: 1px solid #269cd3;
    color: #ffffff;
    &:hover {
      background-color: @primary;
    }
  }

  .icon-user,
  .icon-password {
    color: @primary;
    position: absolute;
    left: 20px;
    top: 4px;
  }

  .login-register {
    display: inline-block;
    text-align: center;
    width: 100%;
  }

  .login-wrong,
  .wrong-text {
    width: 180px;
    height: 180px;
    color: #ffffff;
    background: #0e0e0e;
    opacity: 0.75;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 4px;
    cursor: pointer;
  }
  .wrong-text {
    background: transparent;
    opacity: 1;
    color: #ffffff;
    text-align: center;
    .icon-cha {
      font-size: 70px;
      position: relative;
      top: 10px;
    }
    span {
      display: block;
      font-size: 14px;
      position: relative;
      top: 10px;
    }
  }
}
</style>

<style lang="less">
.page-login {
  .login-form {
    margin: 0 65px;
    .ivu-form-item {
      .ivu-input {
        height: 42px;
        background-color: transparent;
        border: 1px solid #269cd3;
        color: #ffffff;
        padding-left: 45px;
      }

      input::-webkit-input-placeholder{
        color: #3b98f2;
      }

      input::-moz-placeholder{
        color: #3b98f2;
      }
    }
  }
}
</style>
